<template>
  <view class="splash-container">
    <!-- 背景 -->
    <view class="background"></view>
    
    <!-- 进度条容器 -->
    <view class="progress-container">
      <!-- 进度条背景 -->
      <view class="progress-background"></view>
      <!-- 进度条 -->
      <view class="progress-bar" :style="{width: progress + '%'}"></view>
    </view>
    
    <!-- 跑步小人 -->
    <image 
      class="running-man" 
      src="/static/images/run.gif" 
      :style="{
        left: manPosition + 'px',
        bottom: progressContainerBottom + progressBarHeight + 'px'
      }"
    ></image>
    
    <!-- 提示文字 -->
    <view class="message" :class="{show: showMessage}">
      今天你打卡了吗？
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      progress: 0, // 进度条进度
      manPosition: 0, // 小人初始位置
      showMessage: false, // 是否显示提示文字
      progressContainerBottom: 150, // 进度条距离底部距离
      progressBarHeight: 8, // 进度条高度
      screenWidth: 375, // 屏幕宽度
      manWidth: 150 // 小人宽度
    };
  },
  onLoad() {
    // 获取屏幕信息
    uni.getSystemInfo({
      success: (res) => {
        this.screenWidth = res.windowWidth;
        // 调整进度条位置到屏幕下半部分
        this.progressContainerBottom = res.windowHeight * 0.3;
        // 设置小人初始位置(刚好在屏幕左侧外)
        this.manPosition = -this.manWidth;
      }
    });
    
    // 开始加载动画
    this.startLoading();
  },
  methods: {
    startLoading() {
      const duration = 3000; // 总时长3秒
      const interval = 30; // 更新间隔30ms
      const steps = duration / interval;
      let step = 0;
      
      const timer = setInterval(() => {
        step++;
        this.progress = (step / steps) * 100;
        
        // 计算小人位置(从-150到屏幕宽度)
        this.manPosition = -this.manWidth + 
                         (this.screenWidth + this.manWidth) * (step / steps);
        
        if (step >= steps) {
          clearInterval(timer);
          this.progress = 100;
          this.manPosition = this.screenWidth;
          this.showMessage = true;
		  setTimeout(()=>{
			  uni.redirectTo({
			  	url:"/pages/login/login"
			  })
		  },1500)
        }
      }, interval);
    }
  }
};
</script>

<style scoped>
.splash-container {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #4CAF50; /* 绿色背景 */
}

.progress-container {
  position: absolute;
  left: 10%;
  right: 10%;
  height: v-bind('progressBarHeight + "px"');
  bottom: v-bind('progressContainerBottom + "px"');
  background-color: transparent;
}

.progress-background {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 4px;
}

.progress-bar {
  position: absolute;
  height: 100%;
  background-color: white;
  border-radius: 4px;
  transition: width 0.03s linear;
}

.running-man {
  position: absolute;
  width: v-bind('manWidth + "px"');
  height: v-bind('manWidth + "px"');
  transition: left 0.03s linear;
}

.message {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 24px;
  color: white;
  font-weight: bold;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.5s ease-out;
}

.message.show {
  opacity: 1;
  transform: translateY(0);
}
</style>